﻿@{
    ViewData["Title"] = "RoomTypeOrder";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>预约订单</h1>

@* <script src="~/fullcalendar-6.1.15/packages/core/index.global.js"></script>
<script src="~/fullcalendar-6.1.15/dist/index.global.js"></script>
<script src="~/fullcalendar-6.1.15/packages/core/locales/zh-cn.global.js"></script>
<script src="~/fullcalendar-6.1.15/packages/daygrid/index.global.js"></script> *@
<style>
    #calendarPopup {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 800px;
        height: 200px;
        background-color: #fff;
        border: 1px solid #ccc;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        padding: 20px;
        overflow-x: auto; /* 横向滚动 */
        white-space: nowrap; /* 横向不换行 */
    }

    .fc-daygrid-view {
        display: inline-block;
        vertical-align: top;
        white-space: normal;
    }

    .input-container {
        position: relative;
        margin-top: 5px;
        text-align: center;
    }

        .input-container input {
            width: 80%;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
            box-sizing: border-box;
        }
</style>

<div style="width:80%;background:#dddddd;" id="orderall">
    <h2>预订信息</h2>
    <div class="layui-row" style="height:40%">
        <div class="layui-col-md6">
            <div class="grid-demo grid-demo-bg1">
                <div class="layui-form-item">
                    <label class="layui-form-label">客源信息:</label>
                    <div class="layui-input-inline">
                        <select style="width:40%;height:30%" id="interest" name="interest" lay-filter="customerInformation">
                            <option value=0>请选择</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="grid-demo">
                <div class="layui-form-item">
                    <label class="layui-form-label">订单来源:</label>
                    <div class="layui-input-inline">
                        <select name="interest" lay-filter="orderFrom">
                            <option value=0>请选择</option>
                            <option value=1>微盟预定</option>
                            <option value=2>门店前台</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">预定姓名:</label>
                <div class="layui-input-block">
                    <input type="text" id="tenantName" name="tenantName" style="width:30%;float:left;" placeholder="预定姓名" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">手机号码:</label>
                <div class="layui-input-block">
                    <input type="text" id="phoneNumber" name="phoneNumber" style="width:40%;float:left;" placeholder="手机号码" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <br />
    <div style="width:80%;background:#dddddd;">
        <h2>房间信息</h2>
        <div class="layui-row" style="height:40%">
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">入住日期:</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" style="" id="liveTime" name="liveTime" placeholder="yyyy-MM-dd">
                    </div>
                </div>
            </div>

            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">离店日期:</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" style="" id="leaveTime" name="leaveTime" placeholder="yyyy-MM-dd">
                    </div>
                </div>
            </div>

            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">入住天数:</label>
                    <div class="layui-input-block">
                        <input type="text" id="stayDays" name="stayDays" style="" id="stayDays" placeholder="请输入" lay-verify="required" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div style="width:100%;">
            <table style="width:2000px" class="layui-table" id="demoTable" lay-filter="demoTable">
                <tbody>
                    <!-- 这里是动态生成的数据 -->
                </tbody>
            </table>
        </div>

    </div>
    <br />
    <div style="width:80%;background:#dddddd;height:50%;">
        <h2>商户备注</h2>
        <div class="layui-form-item">

            <div class="layui-input-block">
                <span>商户备注:</span>
                <textarea id="shopComment" name="shopComment" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>

        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" type="button" lay-submit lay-filter="AddnreNumber">确定</button>
            <button class="layui-btn" type="button" lay-submit lay-filter="xiunumber">取消</button>
        </div>
    </div>
</div>

<script type="text/html" id="bardemo">
    <a class="layui-btn layui-btn-xs layui-btn-action"  lay-event="yourFunction">房价</a>
    <a class="layui-btn layui-btn-xs layui-btn-action"  lay-event="AddRoomNumber">排房</a>
</script>

<div id="calendarPopup" style="display: none;">
    <div id="calendar"></div>
    <div style="margin-top: 10px; text-align: right;">
        <button id="closeCalendarPopup" class="layui-btn layui-btn-primary layui-border-blue">关闭</button>
    </div>
</div>

<script>
    layui.use(['table', 'jquery', 'layer', 'dropdown', 'form', 'laypage', 'element', 'laydate'], function () {
        var laydate = layui.laydate;
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        var upload = layui.upload;
        var layer = layui.layer;
        var laypage = layui.laypage;
        var element = layui.element;

        // var calendarEl = document.getElementById('calendar');
        // var calendar = new FullCalendar.Calendar(calendarEl, {
        //     initialView: 'dayGridWeek', // 初始视图设置为一周视图
        //     locale: 'zh-cn',
        //     headerToolbar: {
        //         left: 'prev,next today',
        //         center: 'title',
        //         right: 'dayGridWeek,dayGridMonth'
        //     },
        //     height: "auto",
        //     events: [

        //     ],
        //     dayCellContent: function (arg) {
        //         var today = new Date(); // 获取当前日期
        //         var cellDate = arg.date; // 获取当前单元格的日期
        //         // 只有当天才显示输入框
        //         if (cellDate.getFullYear() === today.getFullYear() &&
        //             cellDate.getMonth() === today.getMonth() &&
        //             cellDate.getDate() === today.getDate()) {
        //             var input = document.createElement('input');
        //             input.type = 'text';
        //             input.placeholder = '输入房价';
        //             input.className = 'layui-input';
        //             input.style.width = '80%';
        //             input.style.margin = '2px auto';

        //             input.addEventListener('input', function (event) {
        //                 var newValue = event.target.value;

        //                 var selectedData = calendarConfig.selectedData;
        //                 var tableData = layui.table.cache.demoTable;

        //                 for (var i = 0; i < tableData.length; i++) {
        //                     if (selectedData.roomId == tableData[i].roomId) {

        //                         tableData[i].price = newValue
        //                         layui.table.reload('demoTable', { data: tableData });
        //                     }
        //                 }
        //             });

        //             var content = document.createElement('div');
        //             content.appendChild(input);

        //             return { domNodes: [content] };
        //         }

        //         // 其他日期返回空内容
        //         return { domNodes: [] };
        //     }
        // });

        //前台页面传过来的值
        var roomNumberId = location.search.split('=')[2];
        console.log(roomNumberId)
        var url = new URL(window.location.href);
        // 通过 get 方法获取指定参数的值
        var roomTypeId = url.searchParams.get('roomTypeId');
        console.log(roomTypeId);
        var roomid = roomTypeId;
        //显示
        $.ajax({
            url: 'http://localhost:5174/api/RoomType/GetRoomallByid',
            type: 'get',
            dataType: 'json',
            data: ({ id: roomid }),
            headers: {
                "Authorization": "Bearer " + localStorage.getItem('token')
            },
            async: true,
            success: function (res) {
                console.log(res.data)
                table.render({
                    elem: '#demoTable',
                    data: res.data,
                    cols: [[
                        { type: 'checkbox' },
                        { field: 'roomId', title: '房型id',width:"120" },
                        { field: 'roomName', title: '房型列表', width: "120" },
                        { field: 'lodgingToll', title: '可定数', width: "120" },
                        { field: 'price', title: '门市价(元)', width: "120" },
                        { field: 'reservationMoney', title: '房间均价', edit: 'text', width: "120" },
                        { field: 'orderNumber', title: '房间数量', edit: 'text', width: "120" },
                       // { field: 'lodgingToll', title: '排房' },
                        { field: 'breakfastNum', title: '早餐份数', edit: 'text', width: "120" },
                        { field: 'reservationMoney', title: '自定义房价', edit: 'text', width: "120" },
                        { toolbar: '#bardemo', title: '操作', width: "120" }
                    ]],

                    //page: true
                });
            },
            error: function (error) {
                console.error(error);
            }
        })
        //修改房价
        table.on('edit(testTable)', function (obj) {
            var value = obj.value;  // 获取修改后的值
            var field = obj.field;  // 获取修改的字段

            if (field === 'price') {  // 如果修改的是自定义房价字段
                var row = obj.data;  // 获取当前行数据

                // 将房间均价修改为与自定义房价相同的值
                row.roomsSort = value;

                // 重新渲染表格以显示修改后的值
                table.reload('testTable', { data: [row] });
            }
        });
        var calendarConfig = {
            selectedData: null
        };
        table.on('tool(demoTable)', function (obj) {
            var data = obj.data;
            var event = obj.event;
            //更改状态
            if (event === 'yourFunction') {
                document.getElementById('calendarPopup').style.display = 'block';

                calendarConfig.selectedData = obj.data;

                // 更新日历的显示
                calendar.render(calendarConfig);

                $('#calendarPopup input[type="text"]').val(obj.data.price);

                // 关闭日历弹出窗口
                document.getElementById('closeCalendarPopup').addEventListener('click', function () {
                    document.getElementById('calendarPopup').style.display = 'none';
                });
            }
        });
        // 为入住日期和离店日期输入框添加日期选择器
        laydate.render({
            elem: '#liveTime'
        });
        laydate.render({
            elem: '#leaveTime'
        });
        // 监听离店日期输入框的输入事件
        $('#leaveTime').on('input', function () {
            var checkIn = $('#liveTime').val();
            var checkOut = $('#leaveTime').val();

            if (checkIn && checkOut) {
                var startDate = new Date(checkIn);
                var endDate = new Date(checkOut);

                var days = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24));
                $('#stayDays').val(days);
            }
        });
        // 监听表格复选框选择
        var checked = "";
        table.on('checkbox(demoTable)', function (obj) {
            var checkedData = table.checkStatus('demoTable').data; // 获取选中行的数据
            checked = checkedData;
            console.log(checked);
        });
        getpaysselect()
        function getpaysselect() {
            $.ajax({
                url: 'http://localhost:5174/api/Clients/GetEnum',  // 替换为实际的服务器数据源地址
                type: 'post',
                contentType: "application/json",
                success: function (response) {
                    console.log(response)
                    content = ``;
                    response.forEach(item => {
                        content += `<option value="${item.value}">${item.desc}</option>`

                    });
                    $("#interest").html(content);
                    form.render('select');
                },
                error: function (error) {
                    console.error('获取数据源时出错:', error);
                }
            });
        }
        form.on('submit(AddnreNumber)', function (data) {
            data.elem.disabled = true;//防止重复提交
            // 获取 DOM 元素
            var orderAllDiv = document.getElementById('orderall');

            // 获取客源信息选择框的值
            var customerSourceSelect = orderAllDiv.querySelector('select[name="interest"][lay-filter="customerInformation"]');
            data.field.customerInformation = customerSourceSelect.value;

            // 获取订单来源选择框的值
            var orderSourceSelect = orderAllDiv.querySelector('select[name="interest"]:not([lay-filter="orderFrom"])');
            data.field.orderFrom = orderSourceSelect.value;

            // 获取预定姓名输入框的值
            var reservationNameInput = orderAllDiv.querySelector('input[placeholder="预定姓名"]');
            data.field.tenantName = reservationNameInput.value;

            // 获取手机号码输入框的值
            var mobileNumberInput = orderAllDiv.querySelector('input[placeholder="手机号码"]');
            data.field.phoneNumber = mobileNumberInput.value;

            // 获取入住日期输入框的值
            var checkInDateInput = orderAllDiv.querySelector('#liveTime');
            data.field.liveTime = checkInDateInput.value;

            // 获取离店日期输入框的值
            var checkOutDateInput = orderAllDiv.querySelector('#leaveTime');
            data.field.leaveTime = checkOutDateInput.value;

            // 获取入住天数输入框的值
            var stayDaysInput = orderAllDiv.querySelector('#stayDays');
            data.field.stayDays = stayDaysInput.value;

            // 获取商户备注文本域的值
            var merchantRemarkTextarea = orderAllDiv.querySelector('.layui-textarea');
            data.field.shopComment = merchantRemarkTextarea.value;
            // 将选中的表格数据放入 data.field
            data.field.checkedData = checked;
            data.field.roomId = data.field.checkedData[0].roomId
            data.field.breakfastNum = data.field.checkedData[0].breakfastNum
            data.field.orderNum = data.field.checkedData[0].orderNum
            data.field.reservationMoney = data.field.checkedData[0].reservationMoney
            data.field.orderNumber = data.field.checkedData[0].orderNumber
            data.field.numberId = roomNumberId

            console.log('客源信息:', data.field.roomId);
            console.log('客源信息:', data.field.breakfastNum);
            console.log('客源信息:', data.field.orderNumber);
            console.log('客源信息:', data.field.reservationMoney);
            console.log('客源信息:', data.field.numberId);
            // console.log('订单来源:', data.field.orderSourceValue);
            // console.log('预定姓名:', data.field.reservationNameValue);
            // console.log('手机号码:', data.field.mobileNumberValue);
            // console.log('入住日期:', data.field.checkInDateValue);
            // console.log('离店日期:', data.field.checkOutDateValue);
            // console.log('入住天数:', data.field.stayDaysValue);
            // console.log('商户备注:', data.field.merchantRemarkValue);
            // console.log('选中的数据', data.field.checkedData);
            console.log('选中的数据', data.field);


            $.ajax({
                url: 'http://localhost:5174/api/RoomType/AddRoomOrder',
                type: 'post',
                contentType: "application/json",
                data: JSON.stringify(data.field),
                success: function (res) {
                    // 添加成功后的操作
                    if (res.code > 0) {
                        layer.msg("预定成功");
                        // show();
                    }
                }
            });
            return false;
        });
    });
</script>